import { createApp, reactive } from "vue";
import Dialog from "@/components/common/Dialog.vue"
/** 在main.ts里挂载的方法这里要再次挂载一次，不然createApp实例方法不通 */
import axios from 'axios'
import url from "@/utils/url.ts"
import request from "@/utils/request.ts"
import MessageBox from "@/utils/MessageBox.ts"
import common from "@/utils/common.ts"
import utils from "@/utils/utils.ts"
import pageFiles from "@/utils/pageFiles.ts"
import { usePiniaStore } from "@/pinia/index.ts"

function DialogBox(param: any) {
  const { title, compontent, params, defaultBtns, modal, width, modalCalss, openDelay, closeDelay, fullscreen, destroyOnClose, draggable, closeOnClickModal, closeOnPressEscape, closeIcon, showClose, appendToBody } = param;
  return new Promise((resolve, reject) => {
    const dialogInstance = createApp(Dialog, {
      dialogVisible: true,
      title: title != undefined ? title : '提示',
      params: params!=undefined ? reactive({
        ...params
      }) : {},
      compontent: compontent != undefined ? compontent : null,
      defaultBtns: defaultBtns != undefined ? defaultBtns : true,
      modal: modal != undefined ? modal : true,
      width: width != undefined ? width : 800,
      fullscreen: fullscreen != undefined ? fullscreen : false,
      modalCalss: modalCalss != undefined ? modalCalss : null,
      openDelay: openDelay != undefined ? openDelay : 0,
      closeDelay: closeDelay != undefined ? closeDelay : 0,
      destroyOnClose: destroyOnClose != undefined ? destroyOnClose : true,
      closeOnClickModal: closeOnClickModal != undefined ? closeOnClickModal : false,
      closeOnPressEscape: closeOnPressEscape != undefined ? closeOnPressEscape : false,
      showClose: showClose != undefined ? showClose : true,
      draggable: draggable != undefined ? draggable : true,
      closeIcon: closeIcon != undefined ? closeIcon : null,
      appendToBody: appendToBody != undefined ? appendToBody : false,
      onConfirm: (res: any) => {
        unmount()
        resolve(res)
      },
      onCancel: () => {
        unmount()
        reject(new Error())
      },
    })

    /** 注册自定义指令 v-prevent-reclick 防止重复点击 */
    dialogInstance.directive('prevent-reclick', {
      beforeMount(el, binding) {
        el.disabled = false; // 初始化时启用按钮
        el.addEventListener('click', () => {
          el.disabled = true; // 点击后禁用按钮
          setTimeout(() => {
            el.disabled = false; // 在指定的时间后重新启用按钮
          }, binding.value || 2000); // 使用 binding.value 来设置等待时间，默认为 2000 毫秒
        });
      },
      unmounted(el) {
        // 组件卸载时移除事件监听器
        if (el.hander) {
          el.removeEventListener('click');
        }
      },
    });
    /** 挂载到全局（方法-规则） */
    dialogInstance.provide('$axios', axios);
    dialogInstance.provide('$url', url);
    dialogInstance.provide('$request', request);
    dialogInstance.provide('$common', common);
    dialogInstance.provide('$utils', utils);
    dialogInstance.provide('$MessageBox', MessageBox);
    dialogInstance.provide('$pageFiles', pageFiles);
    dialogInstance.provide('$DialogBox', DialogBox);
    // 卸载组件
    const unmount = () => {
      dialogInstance.unmount()
      document.body.removeChild(parentNode)
    }
    // 创建一个挂载容器
    const parentNode = document.createElement('div')
    document.body.appendChild(parentNode)
    // 挂载组件
    dialogInstance.mount(parentNode)
  })
}

export default DialogBox
